<div class="page">

	<div class="row">
		<div class="col-xs-12">
			<h2 class="section-header" data-translate="PAGE_PAYMENT_TITLE"></h2>
		</div>

		<div class="col-md-12">
			<section class="panel panel-default table-dynamic">
				<div class="table-filters">
					<div class="row">
						<div class="col-sm-4 col-xs-6">
							<form>
								<input type="text"
									   placeholder="{{'GENERIC_LIST_SEARCHBOX' | translate}}"
									   class="form-control"
									   data-ng-model="searchKeywords"
									   data-ng-keyup="search()">
							</form>
						</div>
						<div class="col-sm-3 col-xs-6 filter-result-info">
							<span>
								<span data-translate="GENERIC_LIST_SHOWING"></span> {{filteredItems.length || 0}}/{{items.length || 0}} <span data-translate="GENERIC_LIST_ENTRIES"></span>
							</span>              
						</div>
					</div>
				</div>

				<table class="table table-bordered table-striped table-responsive">
					<thead>
						<tr>
							<th><div class="th">
								<span data-translate="PAGE_USERS_TH_ID"></span>
								<span class="fa fa-angle-up"
									  data-ng-click=" order('name') "
									  data-ng-class="{active: row == 'name'}"></span>
								<span class="fa fa-angle-down"
									  data-ng-click=" order('-name') "
									  data-ng-class="{active: row == '-name'}"></span>
							</div></th>
							<th><div class="th">
								<span data-translate="PAGE_USERS_TH_NAME"></span>
								<span class="fa fa-angle-up"
									  data-ng-click=" order('price') "
									  data-ng-class="{active: row == 'price'}"></span>
								<span class="fa fa-angle-down"
									  data-ng-click=" order('-price') "
									  data-ng-class="{active: row == '-price'}"></span>
							</div></th>
							<th><div class="th">
								<span data-translate="PAGE_USERS_TH_LAST_NAME"></span>
								<span class="fa fa-angle-up"
									  data-ng-click=" order('sales') "
									  data-ng-class="{active: row == 'sales'}"></span>
								<span class="fa fa-angle-down"
									  data-ng-click=" order('-sales') "
									  data-ng-class="{active: row == '-sales'}"></span>
							</div></th>
							<th><div class="th">
								<span data-translate="PAGE_USERS_TH_SECOND_SURNAME"></span>
								<span class="fa fa-angle-up"
									  data-ng-click=" order('rating') "
									  data-ng-class="{active: row == 'rating'}"></span>
								<span class="fa fa-angle-down"
									  data-ng-click=" order('-rating') "
									  data-ng-class="{active: row == '-rating'}"></span>
							</div></th>
							<th><div class="th">
								<span data-translate="PAGE_USERS_TH_USERNAME"></span>
								<span class="fa fa-angle-up"
									  data-ng-click=" order('rating') "
									  data-ng-class="{active: row == 'rating'}"></span>
								<span class="fa fa-angle-down"
									  data-ng-click=" order('-rating') "
									  data-ng-class="{active: row == '-rating'}"></span>
							</div></th>
						</tr>
					</thead>
					<tbody>
						<tr data-ng-repeat="store in currentPageStores">
							<td>{{store.name}}</td>
							<td>{{store.price}}</td>
							<td>{{store.sales}}</td>
							<td>{{store.rating}}</td>
						</tr>
					</tbody>
				</table>

				<footer class="table-footer">
					<div class="row">
						<div class="col-md-6 page-num-info">
							<span>
								<span data-translate="GENERIC_LIST_ITEMS_X_PAGE_SHOW"></span> 
								<select data-ng-model="numPerPage"
										data-ng-options="num for num in numPerPageOpt"
										data-ng-change="onNumPerPageChange()">
								</select> 
								<span data-translate="GENERIC_LIST_ITEMS_X_PAGE_ENTRIES"></span> 
							</span>
						</div>
						<div class="col-md-6 text-right pagination-container">
							<pagination class="pagination-sm"
										ng-model="currentPage"
										total-items="filteredStores.length"
										max-size="4"
										ng-change="select(currentPage)"
										items-per-page="numPerPage"
										rotate="false"
										previous-text="&lsaquo;" next-text="&rsaquo;"
										first-text="{{'GENERIC_PAGINATION_FIRST_TEXT' | translate}}" last-text="{{'GENERIC_PAGINATION_LAST_TEXT' | translate}}"
										boundary-links="true"></pagination>
						</div>
					</div>
				</footer>
			</section>
		</div>

	</div>

</div>